<template>
  <div class="welcome-page bg-gray-50 flex flex-col">
    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col items-center justify-center p-6">
      <div class="max-w-md w-full text-center">
        <!-- 欢迎图标 -->
        <div
          class="w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-8"
        >
          <i class="fa fa-welcome text-5xl text-blue-500"></i>
        </div>

        <!-- 欢迎标题 -->
        <h1 class="text-3xl font-bold text-gray-900 mb-3">欢迎回来，{{ member.note }}</h1>
        <p class="text-gray-500 mb-8" ref="welcomeDate">
          {{ moment(new Date()).format('YYYY 年 MM 月 DD 日 HH:mm:ss ') }}
        </p>

        <!-- 快速操作按钮 -->
        <!-- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10">
          <a
            href="#"
            class="bg-blue-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-blue-600 transition-colors duration-200"
          >
            <i class="fa fa-users text-2xl mb-2"></i>
            <span class="font-medium">用户管理</span>
          </a>
          <a
            href="#"
            class="bg-green-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-green-600 transition-colors duration-200"
          >
            <i class="fa fa-shopping-cart text-2xl mb-2"></i>
            <span class="font-medium">订单管理</span>
          </a>
          <a
            href="#"
            class="bg-purple-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-purple-600 transition-colors duration-200"
          >
            <i class="fa fa-file-text text-2xl mb-2"></i>
            <span class="font-medium">内容管理</span>
          </a>
          <a
            href="#"
            class="bg-yellow-500 text-white p-4 rounded-lg flex flex-col items-center justify-center hover:bg-yellow-600 transition-colors duration-200"
          >
            <i class="fa fa-cog text-2xl mb-2"></i>
            <span class="font-medium">系统设置</span>
          </a>
        </div> -->

        <!-- 系统信息 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">系统信息</h3>
          <div class="space-y-3">
            <div class="flex justify-between">
              <span class="text-gray-500">系统版本</span>
              <span class="font-medium">V1.0.0</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">当前用户</span>
              <span class="font-medium">{{ member.account }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">登录时间</span>
              <span class="font-medium" ref="loginTime">{{ member.lastTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 border-t border-gray-200">
      <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>© 2023 QS管理系统. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import moment from 'moment'
const member = JSON.parse(sessionStorage.getItem('member'))
// 欢迎日期
const welcomeDate = ref('')
const loginTime = ref('')

// 获取当前日期和时间
onMounted(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const week = weekMap[now.getDay()]

  welcomeDate.value = `${year}年${month}月${day}日 ${week}`

  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  loginTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})
</script>

<style scoped>
.welcome-page {
  height: 80vh;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

/* 自定义图标类 */
.fa-welcome {
  content: '\f00c'; /* 使用Font Awesome的对勾图标作为示例 */
}
</style>
